<template>
   <div class="user-manage">
       
       <div class="base-table">
           <div class="action">
               <el-button type="primary" @click="handleCreate">新增</el-button>
           </div>
           <el-table :data="menuList" row-key="id"
           :tree-props="{ children: 'children' }">
                <el-table-column 
                v-for="item in columns"
                :key="item.prop"
                :prop="item.prop" :label="item.label" :width="item.width" 
                :formatter="item.formatter"/>

                <el-table-column label="操作" width="120">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="handleAdd(scope.row)">新增</el-button>
                        <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="handleDel(scope.row)">删除</el-button>
                    </template>
                    </el-table-column>
            </el-table>
            
       </div>

       <el-dialog title="菜单添加" v-model="showModule">
           <el-form ref="menuAddform" :model="menuAdd" label-width="80px" :rules="rulesAdd">
               <el-form-item label="菜单名称" prop="label">
                   <el-input v-model="menuAdd.label" placeholder="请输入菜单名称"/>
               </el-form-item>
               <el-form-item label="编号" prop="key">
                   <el-input v-model="menuAdd.key" placeholder="请输入编号"/>
               </el-form-item>
               <el-form-item label="组件路径" prop="component">
                   <el-input v-model="menuAdd.component" placeholder="请输入组件路径"/>
               </el-form-item>
               <el-form-item label="路由地址" prop="path">
                   <el-input v-model="menuAdd.path" placeholder="请输入路由地址"/>
               </el-form-item>
               <el-form-item label="图标" prop="icon">
                   <el-input v-model="menuAdd.icon" placeholder="请输入图标"/>
               </el-form-item>
               <el-form-item label="菜单类型" prop="type">
                   <el-radio-group v-model="menuAdd.type">
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="2">方法功能</el-radio>
                    </el-radio-group>
               </el-form-item>
               <el-form-item label="状态" prop="enable">
                   <el-switch v-model="menuAdd.enable" active-text="启用" inactive-text="禁用"/>
               </el-form-item>
           </el-form>

           <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleAddReset">取消</el-button>
                    <el-button type="primary" @click="handleAddMenu">确认</el-button>
                </span>
            </template>
       </el-dialog>
   </div>
</template>
<script>
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
import { ElMessage } from 'element-plus'
export default {
    name:'Menu',
    data(){
        return {
            menuList:[],
            columns:[
                {
                    label:'菜单名称',
                    prop:'label'
                },
                {
                    label:'菜单编号',
                    prop:'key'
                },
                {
                    label:'功能',
                    prop:'stepType',
                    formatter(row, column, cellValue, index){
                        return{
                            1:'菜单',
                            2:'方法功能'
                        }[cellValue]
                    }
                },
                {
                    label:'路由',
                    prop:'path'
                },
                {
                    label:'组件',
                    prop:'component'
                },
                {
                    label:'状态',
                    prop:'enable',
                    formatter(row, column, cellValue, index){
                        return{
                            true:'启用',
                            false:'禁用'
                        }[cellValue]
                    }
                },
                {
                    label:'创建时间',
                    prop:'createTime'
                }
            ],
            showModule:false,
            menuAdd:{enable:true,type:1}
        }
    },
    mounted(){
        this.getMenuList();
    },
    methods:{
        async getMenuList(){
            const {code,result,message} = await this.$api.menuTree();
            this.menuList = result;
        },
        handleQuery(){

        },
        handleCreate(){
            this.showModule = true;
        },
        handleAddMenu(){
            this.$refs.menuAddform.validate(async (valid)=>{
                if (valid) {
                    // let { menuForm } = this;
                    // let params = { ...menuForm };
                    const {code,result,message} = await this.$api.menuAdd(this.menuAdd);
                    if (code === 200) {
                        // console.log('-----------------re--------------'+ code + '------------' + message)
                        this.showModule = false;
                        ElMessage.success(message);
                        this.handleAddReset();
                        this.getMenuList();
                    }
                }
            })
        },
        handleAddReset(){
            this.$refs.menuAddform.resetFields();
            this.showModule = false;
        },
        handleAdd(row){
            this.showModule = true;
            this.menuAdd.pId=row.id;
        },
        handleEdit(row){
            this.showModule = true;
            this.$nextTick(()=>{
                Object.assign(this.menuAdd, row);
            })
        },
        async handleDel(row){
            const {code,result,message} = await this.$api.menuDel(row.id);
            if (code === 200) {
                ElMessage.success(message);
                this.getMenuList();
            }
        }
    }
}
</script>
<style lang="scss">

</style>